<template>
  <div>
    <h1>Parent</h1>
    <div>
      <h2>1.直接使用 -- {{ msg }}</h2>
      <input type="text" v-model="msg" />
    </div>

    <div>
      <h2>2.本质上的使用 -- {{ msg }}</h2>
      <input type="text" :value="msg" @input="msg = $event.target.value" />
    </div>

    <div>
      <h2>3.使用本质的方法进行父子组件间的数据双向绑定</h2>
      <Child :value='msg' @input='msg=$event'/>
    </div>

    <div>
      <h2>4.使用v-model进行父子组件间的数据双向绑定</h2>
      <Child v-model='msg'/>
    </div>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Parent",
  data() {
    return {
      msg: "hello",
    };
  },
  components: {
    Child,
  },
};
</script>

<style>
</style>